<script setup>

import {getCurrentInstance, ref, watch} from "vue";
import {deleteFileCate, listFileCate} from "@/api/system/file_cate";
import SysFileCateForm from "@/components/Material/components/SysFileCateForm.vue";

const {proxy} = getCurrentInstance();
const emits = defineEmits(['selectedCid']);
const props = defineProps({
  type: {
    type: Number,
    required: true
  }
})
const queryParams = ref({
  pageSize: -1,
  type: null
})
const cateList = ref([]);
const sysFileCateFormRef = ref();
const selectedCid = ref();

const getList = async () => {
  const {data} = await listFileCate(queryParams.value);
  cateList.value = [{id: null, name: '全部'}, {id: 0, name: '未分组'}, ...data.list];
}

const openFileCate = (cateId, type) => {
  sysFileCateFormRef.value.open(cateId, type, props.type)
}

const handleOption = (command, cateId) => {
  switch (command) {
    case 'rename':
      openFileCate(cateId, 'update')
      break;
    case 'delete':
      proxy.$modal.confirm('确定删除该分类吗？').then(async () => {
        await deleteFileCate(cateId);
        proxy.$modal.okNotify('删除成功');
        await getList();
      })
      break;
  }
}

const handleSelected = (key) => {
  selectedCid.value = key;
  emits('selectedCid', selectedCid.value);
}

watch(() => props.type, (newVal) => {
  // console.log("cate|type",newVal)
  if (newVal) {
    queryParams.value.type = newVal;
    getList();
  }
}, {immediate: true})

</script>

<template>
  <div class="cate-container" v-bind="props">
    <div class="tree-scroll">
      <a-tree
          style="max-width: 200px"
          :data="cateList"
          key="id"
      >
        <template #extra="data">
          <div class="flex flex-1 items-center min-w-0 pr-4" :class="{'active-menu-item':selectedCid === data.id}"
               @click="handleSelected(data.id)">
            <img src="@/assets/images/icon_folder.png" class="w-[20px] h-[16px] mr-3"/>
            <span class="flex-1 truncate mr-2">
              <overflow-tooltip :content="data.name"/>
            </span>
            <template v-if="data.id > 0">
              <a-dropdown @select="(command) => handleOption(command,data.id)">
              <span class="el-dropdown-link outline-none">
                ...
              </span>
                <template #content>
                  <div v-hasPermission="['system:file_cate:rename']">
                    <a-doption value="rename">重命名</a-doption>
                  </div>
                  <div v-hasPermission="['system:file_cate:delete']">
                    <a-doption value="delete">删除</a-doption>
                  </div>
                </template>
              </a-dropdown>
            </template>
          </div>
        </template>
      </a-tree>
    </div>

    <div class="add-btn">
      <a-button @click="openFileCate(null,'create')" v-hasPermission="['system:file_cate:add']">添加分组</a-button>
    </div>

    <sys-file-cate-form ref="sysFileCateFormRef" @success="getList"/>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-tree-node__content) {
  height: 36px;
}

.cate-container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
}

.tree-scroll {
  @apply flex-1 min-h-0;
}

.add-btn {
  border-top: 1px solid #e6e6e6;
  @apply flex justify-center p-2;
}

.active-menu-item {
  color: rgb(var(--primary-6));
}
</style>
